<template>
  <view class="container">
    <el-button 
      v-for="v in beforeBtns"
      :key="v.command"
      :size="size" 
      v-bind="v" 
      @click.stop="$emit(v.command)"
    >
      {{ v.title }}
    </el-button>

    <el-button 
      v-if="tdetailShow"
      :class="tdetailObj.color?`x-${tdetailObj.color}`:''"
      :type="tdetailObj.type||'text'" 
      :size="tdetailObj.size||'small'"
      v-bind="tdetailObj"
      @click.stop="$emit('tdetail')"
    >
      {{ tdetailTitle }}
    </el-button>
    <el-button 
      v-if="teditShow"
      :class="teditObj.color?`x-${teditObj.color}`:''"
      :type="teditObj.type||'text'" 
      :size="teditObj.size||'small'"
      v-bind="teditObj"
      @click.stop="$emit('tedit')"
    >
      {{ teditTitle }}
    </el-button>
    <el-button 
      v-if="tdeleteShow"
      :class="`x-${tdeleteObj.color||'error'}`"
      :type="tdeleteObj.type||'text'" 
      :size="tdeleteObj.size||'small'"
      v-bind="tdeleteObj"
      @click.stop="$emit('tdelete')"
    >
      {{ tdeleteTitle }}
    </el-button>
    <el-button 
      v-if="tdisableShow"
      :class="`x-${tdisableObj.color||'error'}`"
      :type="tdisableObj.type||'text'" 
      :size="tdisableObj.size||'small'"
      v-bind="tdisableObj"
      @click.stop="$emit(tdisabled?'tundisable':'tdisable')"
    >
      {{ tdisabled?tundisableTitle:tdisableTitle }}
    </el-button>
    <el-button 
      v-if="tauthShow"
      :class="`x-${tauthApproveObj.color||'error'}`"
      :type="tauthApproveObj.type||'text'" 
      :size="tauthApproveObj.size||'small'"
      v-bind="tauthApproveObj"
      @click.stop="$emit('tauth-approve')"
    >
      {{ tauthApproveTitle }}
    </el-button>
    <el-button 
      v-if="tauthShow"
      :class="`x-${tauthRejectObj.color||'error'}`"
      :type="tauthRejectObj.type||'text'" 
      :size="tauthRejectObj.size||'small'"
      v-bind="tauthRejectObj"
      @click.stop="$emit('tauth-reject')"
    >
      {{ tauthRejectTitle }}
    </el-button>

    <el-button 
      v-if="queryShow" 
      :size="size" 
      v-bind="queryObj"  
      @click.stop="$emit('query')"
    >
      {{ queryTitle }}
    </el-button>
    <el-button 
      v-if="resetShow" 
      :size="size" 
      v-bind="resetObj"  
      @click.stop="$emit('reset')"
    >
      {{ resetTitle }}
    </el-button>

    <el-button 
      v-if="editShow&&editCan&&!editEditing"
      :size="size" 
      :type="editEditObj.type||'primary'" 
      v-bind="editEditObj"  
      @click.stop="$emit('edit')"
    >
      {{ editEditTitle }}
    </el-button>
    <el-button 
      v-if="editShow&&editEditing"
      :size="size" 
      :type="editSaveObj.type||'primary'" 
      v-bind="editSaveObj"  
      @click.stop="$emit('save')"
    >
      {{ editSaveTitle }}
    </el-button>
    <el-button 
      v-if="editShow&&editCan&&editEditing"
      :size="size" 
      :type="editCancelObj.type||'default'" 
      v-bind="editCancelObj"  
      @click.stop="$emit('cancel')"
    >
      {{ editCancelTitle }}
    </el-button>

    <el-button 
      v-if="addShow" 
      :size="size" 
      :type="addObj.type||'primary'" 
      v-bind="addObj"  
      @click.stop="$emit('add')"
    >
      {{ addTitle }}
    </el-button>
    <el-button 
      v-if="refreshShow" 
      :size="size" 
      :type="refreshObj.type||'primary'" 
      v-bind="refreshObj"  
      @click.stop="$emit('refresh')"
    >
      {{ refreshTitle }}
    </el-button>
    <el-button 
      v-if="exportShow" 
      :size="size" 
      :type="exportObj.type||'primary'" 
      v-bind="exportObj" 
      @click.stop="$emit('export')"
    >
      {{ exportTitle }}
    </el-button>
    <el-button 
      v-if="importShow" 
      :size="size" 
      :type="importObj.type||'primary'" 
      v-bind="importObj" 
      @click.stop="$emit('import')"
    >
      {{ importTitle }}
    </el-button>
    <el-button 
      v-if="deletesShow" 
      :size="size" 
      :type="deletesObj.type||'danger'" 
      v-bind="deletesObj" 
      @click.stop="$emit('deletes')"
    >
      {{ deletesTitle }}
    </el-button>

    <el-button 
      v-for="(v,i) in btns"
      :key="i"
      :size="size" 
      v-bind="v" 
      @click.stop="$emit(v.command)"
    >
      {{ v.title }}
    </el-button>

    <el-dropdown 
      v-if="dropdownItems.length" 
      class="x-ml" 
      v-bind="dropdownObj"
      @command="$emit(v.command)"
    >
      <el-button 
        :size="size" 
        :type="dropdownBtnObj.type||'primary'"
        v-bind="dropdownBtnObj" 
      >
        {{ dropdownBtnTitle }}
        <i class="el-icon-arrow-down el-icon--right" />
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <template v-for="(v,i) in dropdownItems">
          <el-dropdown-item
            :key="i"
            v-bind="v"
          >
            {{ v.title }}
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
    <slot />
  </view>
</template>

<script>
  export default {
    props: {
      // ==============
      // 按钮大小
      // ==============
      size: {
        type: String,
        default: 'small'
      },

      // ==============
      // 表格详情按钮
      // ==============
      tdetailShow: {
        type: Boolean,
        default: false
      },
      tdetailTitle: {
        type: String,
        default: '查看'
      },
      tdetailObj: {
        type: Object,
        default: ()=>({})
      },
      // ==============
      // 表格编辑按钮
      // ==============
      teditShow: {
        type: Boolean,
        default: false
      },
      teditTitle: {
        type: String,
        default: '编辑'
      },
      teditObj: {
        type: Object,
        default: ()=>({})
      },
      // ==============
      // 表格删除按钮
      // ==============
      tdeleteShow: {
        type: Boolean,
        default: false
      },
      tdeleteTitle: {
        type: String,
        default: '删除'
      },
      tdeleteObj: {
        type: Object,
        default: ()=>({})
      },
      // ==============
      // 表格禁用按钮
      // ==============
      tdisabled: {
        type: Boolean,
        default: false,
      },
      tdisableShow: {
        type: Boolean,
        default: false
      },
      tdisableTitle: {
        type: String,
        default: '禁用'
      },
      tundisableTitle: {
        type: String,
        default: '启用'
      },
      tdisableObj: {
        type: Object,
        default: ()=>({})
      },
      // ==============
      // 表格审批按钮
      // ==============
      tauthShow: {
        type: Boolean,
        default: false
      },
      tauthApproveTitle: {
        type: String,
        default: '通过'
      },
      tauthApproveObj: {
        type: Object,
        default: ()=>({})
      },
      tauthRejectTitle: {
        type: String,
        default: '驳回'
      },
      tauthRejectObj: {
        type: Object,
        default: ()=>({})
      },

      // ==============
      // 查询按钮
      // ==============
      queryShow: {
        type: Boolean,
        default: false
      },
      queryTitle: {
        type: String,
        default: '查询'
      },
      queryObj: {
        type: Object,
        default: ()=>({})
      },
      // ==============
      // 重置按钮
      // ==============
      resetShow: {
        type: Boolean,
        default: false
      },
      resetTitle: {
        type: String,
        default: '重置'
      },
      resetObj: {
        type: Object,
        default: ()=>({})
      },
      
      // ==============
      // 详情编辑按钮组
      // ==============
      editShow: {
        type: Boolean,
        default: false
      },
      editEditTitle: {
        type: String,
        default: '编辑'
      },
      editSaveTitle: {
        type: String,
        default: '保存'
      },
      editCancelTitle: {
        type: String,
        default: '取消'
      },
      editEditObj: {
        type: Object,
        default: ()=>({})
      },
      editSaveObj: {
        type: Object,
        default: ()=>({})
      },
      editCancelObj: {
        type: Object,
        default: ()=>({})
      },
      editCan: {
        type: Boolean,
        default: false
      },
      editEditing: {
        type: Boolean,
        default: false
      },
      editType: {
        type: String,
        default: 'detail'
      },

      // ==============
      // 添加按钮
      // ==============
      addShow: {
        type: Boolean,
        default: false
      },
      addTitle: {
        type: String,
        default: '添加'
      },
      addObj: {
        type: Object,
        default: ()=>({})
      },

      // ==============
      // 刷新按钮
      // ==============
      refreshShow: {
        type: Boolean,
        default: false
      },
      refreshTitle: {
        type: String,
        default: '刷新'
      },
      refreshObj: {
        type: Object,
        default: ()=>({})
      },

      // ==============
      // 导出按钮
      // ==============
      exportShow: {
        type: Boolean,
        default: false
      },
      exportTitle: {
        type: String,
        default: '导出'
      },
      exportObj: {
        type: Object,
        default: ()=>({})
      },

      // ==============
      // 导入按钮
      // ==============
      importShow: {
        type: Boolean,
        default: false
      },
      importTitle: {
        type: String,
        default: '导入'
      },
      importObj: {
        type: Object,
        default: ()=>({})
      },

      // ==============
      // 批量删除按钮
      // ==============
      deletesShow: {
        type: Boolean,
        default: false
      },
      deletesTitle: {
        type: String,
        default: '批量删除'
      },
      deletesObj: {
        type: Object,
        default: ()=>({})
      },

      // ==============
      // 自定义按钮数组
      // ==============
      btns: {
        type: Array,
        default: ()=>([])
      },
      beforeBtns: {
        type: Array,
        default: ()=>([])
      },
      
      // ==============
      // 更多按钮
      // ==============
      dropdownObj: {
        type: Object,
        default: ()=>({})
      },
      dropdownBtnTitle: {
        type: String,
        default: '更多'
      },
      dropdownBtnObj: {
        type: Object,
        default: ()=>({})
      },
      dropdownItems: {
        type: Array,
        default: ()=>([])
      },
    },
    data() {
      return {
        
      }
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
}
</style>
